﻿<UserControl 
  x:Class="ContentControl3D_Demo.Samples.ContentTemplatesSample"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:thriple="http://thriple.codeplex.com/"
  >
  <UserControl.Background>
    <ImageBrush ImageSource="Images/OuterSpace.jpg" />
  </UserControl.Background>

  <UserControl.Resources>
    <!-- 
    This template is used to render both the  
    front and back sides of the surface. 
    -->
    <DataTemplate x:Key="FrontAndBackTemplate">
      <Border 
        x:Name="border" 
        Background="#AA000000" 
        BorderBrush="DarkRed" 
        BorderThickness="3"
        CornerRadius="6" 
        Padding="2"
        >
        <Grid x:Name="grid" Width="300" Height="300">
          <Grid.Background>
            <ImageBrush 
              ImageSource="Images/Spaceship1.jpg" 
              Opacity="0.5"
              Stretch="Uniform" 
              />
          </Grid.Background>

          <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
          </Grid.RowDefinitions>

          <TextBlock
            Grid.Row="0"
            FontSize="20"
            FontWeight="Bold"
            Foreground="DodgerBlue"
            HorizontalAlignment="Center"
            Text="{TemplateBinding Content}"
            TextAlignment="Center"
            VerticalAlignment="Top"
            />
          <TextBlock Grid.Row="1" HorizontalAlignment="Center">
            <Hyperlink Command="thriple:ContentControl3D.RotateCommand">
              <TextBlock Text="(rotate)" />
            </Hyperlink>
          </TextBlock>
        </Grid>
      </Border>
      <DataTemplate.Triggers>
        <!-- 
        Show a different spaceship on the back side of the surface. 
        -->
        <Trigger Property="thriple:ContentControl3D.IsOnFrontSide" Value="False">
          <Setter TargetName="grid" Property="Background">
            <Setter.Value>
              <ImageBrush ImageSource="Images/Spaceship2.jpg" Stretch="Uniform" Opacity="0.5"/>
            </Setter.Value>
          </Setter>
        </Trigger>

        <!-- 
        Fade away the surface during a rotation, 
        and then fade it back in halfway through. 
        -->
        <DataTrigger 
          Binding="{Binding 
            Path=IsRotating, 
            RelativeSource={RelativeSource 
              Mode=FindAncestor, 
              AncestorType={x:Type thriple:ContentControl3D}}}"
          Value="True"
          >
          <DataTrigger.EnterActions>
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation 
                  Storyboard.TargetName="border" 
                  Storyboard.TargetProperty="Opacity" 
                  From="1" To="0.25" 
                  AutoReverse="True"
                  Duration="0:0:0.400"
                  />
              </Storyboard>
            </BeginStoryboard>
          </DataTrigger.EnterActions>
        </DataTrigger>
      </DataTemplate.Triggers>
    </DataTemplate>

    <!-- 
    This Style makes the control rotate in the 'opposite' 
    direction when flipping from back to front. 
    -->
    <Style x:Key="BackFlipStyle" TargetType="{x:Type thriple:ContentControl3D}">
      <Setter Property="RotationDirection" Value="LeftToRight" /> 
      <Style.Triggers>
        <Trigger Property="IsFrontInView" Value="False">
          <Setter Property="RotationDirection" Value="RightToLeft" />
        </Trigger>
      </Style.Triggers>
    </Style>
  </UserControl.Resources>

  <thriple:ContentControl3D
    AnimationLength="800"
    BackContent="Spacecruiser"
    BackContentTemplate="{StaticResource FrontAndBackTemplate}"
    Content="Galactic Warship" 
    ContentTemplate="{StaticResource FrontAndBackTemplate}"
    MaxWidth="700" MaxHeight="700"
    Style="{StaticResource BackFlipStyle}"
    />
</UserControl>